<template>
  <!-- bug修复：移除类名中的空格 -->
  <div class="inquiry-list">
    <!-- 搜索栏 -->
    <!-- bug修复：移除指令中的空格 -->
    <van-tabs v-model:active="activeTab" :sticky="true">
      <van-tab title="商机线索" name="1">
        <van-notice-bar left-icon="volume-o" :text="noticeText" style="position: sticky;top:50px;z-index:1000;"/>
        <!-- 商机线索内容可后续补充 -->
        <div
          style="display: flex;flex-direction:row;width:100%;background-color: white; z-index: 1;border-bottom:1px solid #b1b1b1;">
          <van-search v-model="searchValue" placeholder="输入关键字" shape="round" right-icon="search" @search="onSearch"
            style="width: 85%;padding-top:2px;padding-bottom:2px;" :show-action="false">
          </van-search>
          <van-button type="text" @click="openFilter" class="btsx" size="small">筛 选</van-button>
        </div>
        <!-- 询盘列表 -->
        <!-- bug修复：移除指令中的空格 -->
        <div v-if="inquiryList && inquiryList.length > 0 " style="margin-bottom: 60px;">
          <div v-for="(item, index) in inquiryList" :key="index" class="inquiry-item" @click="onView(item)">
            <div class="title" v-if="item.rghsbz && item.rghsbz == '1' ">
              <span style="width:80%;">{{ item.title }}</span>
              <van-tag type="success" size="small" style="margin-left: 10px;float:right;width:20%;text-align:center;"
                v-if="item.rghsbz && item.rghsbz == '1'">已人工核实</van-tag>
            </div>
            <div class="title" v-else>
              <span style="width:100%;">{{ item.title }}</span>
            </div>
            <div class="meta">
              <span style="margin-left:10px;">发布时间：{{ item.fbsj }}</span>
            </div>
            <!--  <div class="meta">
              <span>收货地：</span>
              <span style="color:black;font-size:14px;">{{item.provincename + '/' + item.cityname + '/' + item.areaname }}</span>
            </div>
            <div class="meta">
              <span>采购人：</span>
              <span style="color:black;font-size:14px;">{{item.cgrname }}</span>
            </div>
            <div class="meta">
              <span>联系方式：</span>
              <span style="color:#E9470F;font-size:14px;">{{item.cgrphone }}</span>
            </div> -->
            <div class="description">描述：{{item.content}}</div>
            <div style="display: flex; align-items: center;width:100%;margin-top:20px;">
              <van-progress :percentage=" (item.jdsl / item.zdsl) * 100" color="#14C262" :stroke-width="20"
                :show-pivot="false" style="width: 90%;" />
              <span style="margin-left: 10px;width:10%;text-align:center;">{{item.jdsl}}/{{item.zdsl}}</span>
            </div>
            <div class="meta" style="margin-top:10px;">
              <span style="color:#E9470F">{{ item.jdsl }} 人报价</span>
              <span style="position:absolute;right:10px;color:#E9470F">{{ (item.provincename ? item.provincename:'') + '
                ' +
                (item.cityname ? item.cityname:'') +' ' + (item.areaname ? item.areaname:'') }}</span>
            </div>
          </div>
        </div>
        <div v-else style="width:100%;display:flex;flex-direction:column;align-items:center;">
          <van-empty description="暂时没有此类商机" />
          <div style="font-size:14px;color:#b1b1b1;margin-bottom:30px;">输入产品名称或行业关键词</div>
          <van-button type="primary" size="small" @click="gotoAddinquiry">定制商机</van-button>
        </div>
      </van-tab>
      <van-tab title="免费宣传" name="2">
        <div style="background-color:#fff;height:calc(100vh - 120px) ;">
          <div style="font-size:16px;padding:10px;line-height:2;">免费将您的商品上架至“商圈云精品汇”，并直接推荐给全国 3 万+代理商。</div>
          <div style="font-size:16px;padding:10px;">
            免费推广，请联系:
          </div>
          <div style="font-size:16px;padding:10px;">
            卢经理：13791809823（微信同号）
          </div>
          <div style="font-size:16px;padding:10px;">
            郭经理：17659320892（微信同号）。
          </div>
        </div>
      </van-tab>
      <van-tab title="直播带货" name="3">
        <div style="background-color:#fff;height:auto;">
          <div style="font-size:16px;padding:10px;line-height:2;">
            <label style="font-weight:bold;">一、服务简介</label> <br />
            我们为品牌/企业提供一站式直播代运营服务，涵盖账号搭建、内容策划、直播执行、数据分析等全流程服务，助力提升直播转化率与品牌曝光。
          </div>
          <div style="font-size:16px;padding:10px;line-height:2;">
            <label style="font-weight:bold;">二、服务内容</label><br />
            1. 基础套餐（适合初创品牌） <br />
            服务内容：<br />
            • 账号诊断与定位 <br />
            • 月度直播策划（4场/月，每场2小时）<br />
            • 基础脚本撰写与话术设计<br />
            • 直播场地布置建议<br />
            • 基础数据复盘报告<br />
            • 合作周期：建议至少3个月起签<br />
            • 费用3000起<br />
            2. 标准套餐（适合成长型品牌）<br />
            服务内容：<br />
            • 定制化直播方案（8场/月，含1场大促专场）<br />
            • 专业脚本策划与流程设计<br />
            • 主播培训或代播服务（可选）<br />
            • 实时流量投放建议（Dou+/千川等）<br />
            • 精细化数据复盘与优化建议<br />
            • 合作周期：建议6个月起签<br />
            • 费用5000起<br />

            3. 高端定制套餐（适合成熟品牌）<br />
            服务内容：<br />
            • 全案代运营（12场+/月，含品牌专场活动）<br />
            • 专属团队（策划+运营+主播+场控）<br />
            • 短视频引流内容制作（5条/月）<br />
            • 付费流量精准投放<br />
            • 竞品分析与行业资源对接<br />
            • 月度品牌增长报告<br />
            • 费用：¥30,000-60,000/月 <br />
            • 合作周期：年度合作优先<br />
          </div>
          <div style="font-size:16px;padding:10px;line-height:2;">
            <label style="font-weight:bold;">三、增值服务（可选）</label><br />
            1. 代播服务：专业主播出镜 ¥500-1,500/场<br />
            2. 短视频制作：引流短视频 ¥800-2,000/条<br />
            3. 投流代运营：广告预算的10%-15%作为服务费<br />
            4. 培训服务：主播/运营团队培训 ¥5,000-10,000/场<br />
          </div>
          <div style="font-size:16px;padding:10px;line-height:2;">
            <label style="font-weight:bold;">四、合作流程</label><br />
            1. 需求沟通：明确品牌目标、预算、产品特性。<br />
            2. 方案定制：提供服务计划与报价确认。<br />
            3. 合同签订：支付项目款。<br />
            4. 执行阶段：直播策划-测试-正式执行-复盘。<br />
            5. 效果优化：按月调整策略，定期汇报。<br />
          </div>
          <div style="font-size:16px;padding:10px;line-height:2;">
            <label style="font-weight:bold;">五、合作方式</label><br />
            纯服务费模式：按套餐收取固定费用，不含佣金。<br />
            服务费+佣金分成：基础服务费 + GMV的1%-5%。<br />
            短期项目制：单场直播策划执行 ¥3,000-8,000/场。<br />
          </div>
          <div style="font-size:16px;padding:10px;line-height:2;">
            <label style="font-weight:bold;">六、服务承诺</label><br />
            保证直播频次与执行质量。<br />
            数据透明化，提供实时后台数据截图。<br />
            7×12小时应急响应（大促期间24小时支持）。<br />
          </div>
          <div style="font-size:16px;padding:10px;line-height:2;">
            备注 <br />
            1.具体报价根据产品类目、直播频次、团队配置浮动 。<br />
            2.硬件设备（灯光/摄像头等）如需代采购，费用另计 。<br />
          </div>
          <div style="font-size:16px;padding:10px;">
            卢经理：13791809823（微信同号）
          </div>
          <div style="font-size:16px;padding:10px;">
            郭经理：17659320892（微信同号）。
          </div>
          <div>
            <label style="font-weight:bold;font-size:16px;padding:10px;margin-bottom:20px;">合作案例：</label><br />
            <img :src="require('@/assets/anli/anli1.jpg')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli2.jpg')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli3.jpg')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli4.jpg')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli5.png')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli6.jpg')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli7.png')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli8.png')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli9.jpg')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli10.jpg')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli11.png')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli12.jpg')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli13.jpg')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli14.jpg')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
            <img :src="require('@/assets/anli/anli15.jpg')" alt="公众号"
              style="width: 80%; height: auto;margin-left:10%;margin-top:20px;">
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 开通提醒按钮 -->
    <!-- bug修复：移除类名中的空格 -->
    <!-- <div class="reminder-button" @click="gotoRechHyinfo">
        <van-button type="danger" round>提前3分钟收到提醒 立即开通</van-button>
      </div> -->
    <!-- 新消息提醒 -->
    <!-- bug修复：移除类名中的空格 -->
    <!--
      <div class="new-reminder">
        <span>新消息提醒剩余：{{reminderCount}} 次</span>
        <van-icon name="info-circle" size="16px" />
      </div>
      -->
    <!-- 筛选条件弹窗 -->
    <van-popup v-model="showFilter" position="right" :style="{ width:'90%',height: '90%',maxHeight: '100%'}">
      <div class="rownr">
        <div style="padding-left:20px;padding-top:10px;padding-bottom:10px;">条件选择</div>
        <div @click="onClose" style="position:absolute;right:20px;padding-top:10px;padding-bottom:10px;">收起</div>
      </div>
      <div class="filter-content">
        <van-field v-model="filterParams.searchtext" label="关键字" placeholder="请输入关键字" />
        <van-collapse v-model="activeNames">
          <van-collapse-item :title="qyname" name="1">
            <van-tabs v-model:active="areaTabActive">
              <van-tab title="全国" name="0">
                <van-grid :column-num="3">
                  <van-grid-item text="全国" @click="onSelectQuanguo" />
                </van-grid>
              </van-tab>
              <van-tab title="省份" name="1">
                <div style="max-height: 400px; overflow-y: auto;padding-bottom:60px;">
                  <van-grid :column-num="3">
                    <van-grid-item v-for="(province, index) in provinceList" :key="index" :text="province.name"
                      @click="selectArea('1', province.code,province.name)"
                      :class="{'selected-area': selectedArea.level === '1' && selectedArea.code === province.code}" />
                  </van-grid>
                </div>
              </van-tab>
              <van-tab title="城市" name="2">
                <div style="max-height: 400px; overflow-y: auto;padding-bottom:60px;">
                  <van-grid :column-num="3">
                    <van-grid-item v-for="(city, index) in cityList" :key="index" :text="city.name"
                      @click="selectArea('2', city.code,city.name)"
                      :class="{'selected-area': selectedArea.level === '2' && selectedArea.code === city.code}" />
                  </van-grid>
                </div>
              </van-tab>
              <van-tab title="区县" name="3">
                <div style="max-height: 400px; overflow-y: auto;padding-bottom:60px;">
                  <van-grid :column-num="3">
                    <van-grid-item v-for="(county, index) in areaList" :key="index" :text="county.name"
                      @click="selectArea('3', county.code,county.name)"
                      :class="{'selected-area': selectedArea.level === '3' && selectedArea.code === county.code}" />
                  </van-grid>
                </div>
              </van-tab>
            </van-tabs>
          </van-collapse-item>
        </van-collapse>
        <div class="filter-buttons">
          <van-button type="default" style="width:50%" @click="resetFilter">重置</van-button>
          <van-button type="primary" style="width:50%" @click="handleFilter">确定</van-button>
        </div>
      </div>
    </van-popup>

  </div>
</template>
<script>
import wechat from '@/utils/wechat';
import { addHyinfo, getAccessToken, getUserInfo, listSysarea, queryHyinfoByOpenid, querySjinfoList } from '../../api/api';
export default {
  data() {
    return {
      searchValue: '',
      inquiryList: [],
      pageNum: 1,
      pageSize: 10,
      loading: false,
      showFilter: false,
      filterParams: {
        searchtext: ''
      },
      areaList: [],
      provinceList: [],
      cityList: [],
      areaTabActive: '0',
      selectedArea: {
        level: '',
        code: ''
      },
      activeIndex: 0,
      activeNames: [],
      qyname: '区域选择',
      provincecode: '',
      citycode: '',
      areacode: '',
      activeTab: '1',
      noticeTexts:[
        '山*** 2分钟前领取了寻找休闲食品的商机',
        '王*** 3分钟前领取了寻找食品饮料的商机',
        '河*** 5分钟前领取了寻找白酒的商机',
        '张*** 10分钟前领取了寻找休闲食品的商机',
        '王*** 15分钟前领取了寻找电池的商机',
        '鲁*** 20分钟前领取了寻找调味品的商机',
        '张*** 30分钟前领取了寻找休闲食品的商机',
        '张*** 13分钟前领取了寻找休闲食品的商机',
        '王*** 45分钟前领取了寻找休闲食品的商机',
        '李*** 1小时前领取了寻找休闲食品的商机',
        '王*** 1小时30分钟前领取了寻找休闲食品的商机',
        '王*** 2小时前领取了寻找调味品的商机',
        '王*** 2小时30分钟前领取了寻找休闲食品的商机',
        '张*** 25分钟前领取了寻找饮料的商机',
        '王*** 3小时前领取了寻找休闲食品的商机',
        '王*** 3小时30分钟前领取了寻找乳制品的商机',
        '王*** 4小时前领取了寻找休闲食品的商机',
        '王*** 4小时30分钟前领取了寻找休闲食品的商机',
      ],
      noticeText:''
    }
  },
  mounted() {
    // 可以在这里添加初始化逻辑
    window.addEventListener('scroll', this.handleScroll);
  },

  beforeDestroy() {
    // 移除滚动事件监听，防止内存泄漏
    window.removeEventListener('scroll', this.handleScroll);
  },
  created() {
    this.pageNum = 1
    const that = this
    let openid = localStorage.getItem('openid')
    //let openid = 'od_qK6kO1ih8S592eKAEdx90kkwc'
    if(!openid){
      that.getWxopenid()
      //that.querySjinfoList()
    }else{
      that.openid = openid
      that.queryHyinfoByOpenid()
    }
    that.getSysAreaProvinceList()
    this.getRandomNoticeText(); // 调用获取随机公告文本的方法
    // 定义一个定时器变量，用于后续清除定时器
    this.noticeTextTimer = setInterval(() => {
      this.getRandomNoticeText();
    }, 5000); // 每5秒调用一次getRandomNoticeText方法，可根据需要调整时间间隔
  },
  methods: {
    getRandomNoticeText() {
      const randomIndex = Math.floor(Math.random() * this.noticeTexts.length);
      const randomNoticeText = Math.floor(Math.random() * this.noticeTexts.length);
      const randomNoticeText1 = Math.floor(Math.random() * this.noticeTexts.length);
      this.noticeText =  this.noticeTexts[randomIndex] + '             ' + this.noticeTexts[randomNoticeText] + '           ' + this.noticeTexts[randomNoticeText1];
    },
    handleScroll(){
      let that = this
      const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
      if (scrollTop + clientHeight >= scrollHeight -5 ) {
        that.pageNum = that.pageNum + 1;
        that.querySjinfoList()
      }
    },

    queryHyinfoByOpenid(){
      let that = this 
      let param = {openid:this.openid}
      queryHyinfoByOpenid(param).then(response => {
        if(response.code == 200){
          if(response.data){
            that.hyid = response.data.hyid
            localStorage.setItem('hyid', that.hyid)
            that.querySjinfoList()
          }else{
            that.getWxopenid()
          }
        }
      })
    },
    gotoAddinquiry(){
        this.$router.push({ path: '/dzsjinfo',query:{hyid:this.hyid} })
    },

    getWxopenid(){
      let that = this
      wechat.getOpenId().then(data => {
          let code = data.code
          if (code) {
            try {
              let param = {
                code: code,
              }
              getAccessToken(param).then(res => {
                if(res.code == 200){
                  let access_token = res.data.access_token
                  let openid = res.data.openid
                  that.openid = openid
                  that.accessToken = access_token
                  localStorage.setItem('openid', res.data.openid)
                  let data2 = {
                    openid: openid,
                    access_token: access_token
                  }
                  getUserInfo(data2).then(res1 => {
                    if(res1.code == 200){
                      data2 = res1.data
                      that.saveHyinfoByOpenid(data2);
                    }
                  })
                }
              })
            } catch (error) {
              console.error('获取失败:', error);
            }
          }
      })
      .catch(error => {
        debugger
        console.error('获取失败:', error)
      })
    },

    // 保存会员信息
    saveHyinfoByOpenid(param){
      let that = this
      param.wxname = param.nickname
      addHyinfo(param).then(response => {
        if(response.code == 200){           
          that.hyid = response.data.hyid
          that.zhye = response.data.zhye
          localStorage.setItem('wxname', response.data.wxname)
          localStorage.setItem('hyid', that.hyid)
          localStorage.setItem('headimgurl', that.headimgurl)
          that.querySjinfoList()
        }else{
          debugger
          console.log('添加失败:', response)
        }
      })
    },
  
    gotoRechHyinfo() {
      this.$router.push({ path: '/rechargehy', query: { hyid: this.hyid, zhye: this.zhye }})
    },
    onView(item) {
      this.$router.push({ path: '/home', query: { sjid: item.sjid }})
    },
    onSearch() {
      this.pageNum = 1 // 重置页码
      this.inquiryList = [] // 清空列表
      this.querySjinfoList() // 调用查询方法
    },
    onChangeMb() {

    },
    onSelectQuanguo() {
      this.activeNames = []
      this.qyname = '全国'
      this.provincecode = ''
      this.citycode = ''
      this.areacode = ''
      this.areaTabActive = '0'
      this.selectedArea.level = '0'
      this.selectedArea.code = ''
    },
    getSysAreaProvinceList() {
      const param = { level: 1 }
      listSysarea(param).then(response => {
        this.provinceList = response.rows
      })
    },
    onClose() {
      this.showFilter = false
    },
    selectArea(level, code, name) {
      const that = this
      if (level === '1') {
        this.areaTabActive = '2'
        this.selectArea.level = '2'
        this.qyname = name
        this.provincecode = code
        const param = { level: '2', provincecode: code }
        listSysarea(param).then(response => {
          that.cityList = response.rows
        })
      }
      if (level === '2') {
        this.selectedArea.level = '3'
        this.areaTabActive = '3'
        this.qyname = this.qyname + '/' + name
        this.citycode = code
        const param = { level: '3', citycode: code }
        listSysarea(param).then(response => {
          that.areaList = response.rows
        })
      }
      if (level === '3') {
        this.qyname = this.qyname + '/' + name
        this.activeNames = []
        this.areacode = code
        this.areaTabActive = '0'
      }
    },
    querySjinfoList() {
      let that = this
      const param = { pageNum: this.pageNum, pageSize: this.pageSize ,gjzstr:this.searchValue ,hyid:this.hyid }
      param.provinceCode = this.provinceCode
      param.cityCode = this.cityCode
      param.areaCode = this.areaCode
      param.keyword = this.searchValue
      param.hyid = this.hyid
      querySjinfoList(param).then((res) => {
        if (res.code === 200) {
          const list = res.rows
          that.inquiryList = that.pageNum == 1 ? list : that.inquiryList.concat(list)
        }
      }).catch((error) => {
        console.error('查询数据失败:', error)
      })
    },
    handleMore() {
      // 处理更多按钮点击事件
    },
    openFilter() {
      // 处理筛选按钮点击事件
      this.showFilter = true
    },
    handleFilter() {
      this.showFilter = false
      this.pageNum = 1 // 重置页码
      this.inquiryList = [] // 清空列表
      const param = { pageNum: this.pageNum, pageSize: this.pageSize }
      param.gjzstr = this.filterParams.searchtext
      param.provincecode = this.provincecode
      param.citycode = this.citycode
      param.areacode = this.areacode
      param.hyid = this.hyid
      querySjinfoList(param).then((res) => {
        if (res.code === 200) {
          const list = res.rows
          if (list.length > 0) {
            this.inquiryList = list
          }
        }
      }).catch((error) => {
        console.error('查询数据失败:', error)
      })
    },
    resetFilter() {
      this.filterParams = {
        searchtext: ''
      }
      this.citycode = ''
      this.areacode = ''
      this.provincecode = ''
      this.qyname = '区域选择'
      this.areaTabActive = '0'
      this.selectedArea.level = ''
      this.selectedArea.code = ''
    }
  }
}
</script>
<style scoped>

  .rownr{
    background-color:#F8F8F8;
    width:100%;
    height:40px;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
/* bug修复：移除类名中的空格 */
.inquiry-list {

}
/* bug修复：移除类名中的空格 */
.inquiry-item {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color:#E9470F;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.meta {
  color: #999;
  margin-bottom: 10px;
}
.description {
  line-height: 1.5;
  font-size:14px;
}
/* bug修复：移除类名中的空格 */
.reminder-button {
  text-align: center;
  margin: 20px 0;
  position: fixed;
  bottom: 0px;
  width: 100%;
}
/* bug修复：移除类名中的空格 */
.new-reminder {
  width: 100%;
  height: 40px;
  text-align: center;
  color: #f60;
  position: fixed;
  bottom: 0px;
}

.btsx{
  width:15%;
  background-color:white;
  height:61.86px;
  border: none;
  outline: none;color:blue;
}

.empty{
  text-align:center;
  color:gray;
  margin-top:20px;
  background-color: #fff;
  padding: 20px;
  width:100%;
  height: 60px;
}

.selected-area {
  background-color: #f0faff;
  color: #07c160;
}

.filter-buttons{
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  width:100%;
}
</style>
